<template>
  <div>
    <el-dialog
      :title="this.$t('LineManagementLang.InsuranceInterval')"
      :visible.sync="Visible"
      width="700px"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <div class="midContant clearfix">
        <div class="dialogBox top">
          <div style="display:flex; margin-bottom: 5px;gap:10px">
            <div style="cursor: pointer;display: flex;align-items: center;gap:5px" @click="addItem()">
              <img style="width:12px;height:12px;" src="../../assets/img/add.png" alt="">
              <span>{{$t('common.Add')}}</span>
            </div>
            <div style="cursor: pointer;display: flex;align-items: center;gap:5px" @click="delItem()">
              <img style="width:12px;height:12px;" src="@/assets/img/del.png" alt="">
              <span>{{$t('common.del')}}</span>
            </div>
          </div>
          <MyTable
          :tableColumn="tableColumn"
          :tableData="tableData"
          :isOrder="false"
          @sendCurrentData="setCurrent"
          @sendTabClick="setTabClick"
          >
            <template v-slot:content="scope">
              <span v-if="scope.config.templateType=='Select'">
                <span v-if="scope.row.index === tabClickIndex && tabClickLabel === scope.config.label">
                  <el-select
                    v-fo-select
                    @change="selectChange(scope.row,scope.config.prop)"
                    @visible-change="inputType"
                    v-model="scope.row[scope.config.prop]"
                  >
                    <el-option
                      v-for="item in options_Insure"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>  
                </span>
                <span v-else>{{ scope.row[scope.config.prop+'_name'] }}</span> 
              </span>
              <span v-else-if="scope.config.templateType=='InputNumber'">
                <span v-if="scope.row.index === tabClickIndex && tabClickLabel === scope.config.label">
                  <el-input-number
                    v-fo
                    v-noFocu
                    v-model="scope.row[scope.config.prop]"
                    controls-position="right"
                    :min="0"
                    :precision="scope.config.precision"
                    @blur="inputBlur(scope.row,scope.config.prop)">
                  </el-input-number>  
                </span>
                <span v-else>{{ scope.row[scope.config.prop] }}</span>
              </span>  
              <span v-else>{{ scope.row[scope.config.prop] }}</span>  
            </template>
          </MyTable>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirm" size="small"
          >{{$t('common.confirm')}}</el-button
        >
        <el-button  @click="cancel" size="small">{{$t('common.cancel')}}</el-button>
      </span>
      
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      Visible: false,
      options_Insure:[],
      tableColumn: [
        {
          label: "",
          prop: "table_code",
          width:40,
        },
        {
          checked: true,
          label: this.$t('FreightManagementLang.Interval_type'),
          prop: "type",
          width:120,
          templateType:'Select',
        },
        {
          checked: true,
          label: this.$t('FreightManagementLang.Interval_value_min'),
          prop: "range_val_min",
          order:"",
          width:120,
          precision:4,
          templateType: "InputNumber",
        },
        {
          checked: true,
          label: this.$t('FreightManagementLang.Interval_value_max'),
          prop: "range_val_max",
          order:"",
          width:120,
          precision:4,
          templateType: "InputNumber",
        },
        {
          checked: true,
          label: this.$t('LineManagementLang.Insurance_premium_rate'),
          prop: "premium_rate",
          width: 120,
          precision:2,
          templateType:'InputNumber',
        },
      ],
      tableData: [],
      sendDataObj:{},
      tabClickIndex:null,
      tabClickLabel:null,
      confirmTrue:true,//确定按钮保护
    };
  },
  created() {
    
  },
  mounted() {
  },
  deactivated(){
    
  },
  watch: {
  },
  methods: {
   
    init(data) {
      this.id = data;
      this.getOptions()
      this.getData()
      this.Visible = true;
    },
    //获取单条
    getData() {
      this.$get("linePremiumRanges", { id: this.id }).then(
        (res) => {
          this.tableData = res.data;
        }
      );
    },
    //获取下拉单数据
    getOptions(){
      this.$get("freightSysItems").then((res) => {
        this.options_Insure = res.data.insure_type;
      });
    },
    addItem(){
      let obj={
        id:this.tableData.length+1,
        type:'',
        range_val_min:'',
        range_val_max:'',
        premium_rate:'',
      }
      this.tableData.push(obj)
      this.tableData.forEach((item,k)=>{
        item.table_code=k+1
      })
    },
    delItem(){
      if(!!this.sendDataObj){
        this.tableData=this.tableData.filter(item=>{return item.id!=this.sendDataObj.id})
        this.tableData.forEach((item,k)=>{
          item.table_code=k+1
        })
      }
    },
    // 提交修改
    confirm() {
      let type=true
      let isComplete=true
      if(this.tableData.length==0){
        this.$message.warning(this.$t('FreightManagementLang.message1'));
        type=false
      }else{
        
        this.tableData.forEach(item=>{
          if((!item.type&&item.type!==0)||(!item.range_val_min&&item.range_val_min!=0)||(!item.range_val_max&&item.range_val_max!=0)||(!item.premium_rate&&item.premium_rate!=0)){
            isComplete=false
            type=false
          }
        })
      }
      if(!isComplete){
        this.$message.warning(this.$t('FreightManagementLang.message2'));
      }
      // 是否有空值必选项标识
      if (type && this.confirmTrue) {
        this.confirmTrue=false
        window.setTimeout(()=>{
          this.confirmTrue=true
        },1000)
        let params = new FormData();
        
        params.append("id", this.id);
        params.append("list", JSON.stringify(this.tableData));

        this.$postForm("saveLinePremiumRange", params).then((res) => {
          this.confirmTrue=true
          if(res.success){
            this.$message.success(res.msg);
            this.$emit("success");
            this.cancel()
          }
        });
      }
    },
    setCurrent (data){
      this.sendDataObj=data
    },
    setTabClick({index,label}){
      this.tabClickIndex=index
      this.tabClickLabel=label
    },
    // 失去焦点初始化
    inputBlur (row,prop) {
      this.tabClickIndex = null
      this.tabClickLabel = null   
    },
    selectChange(row,prop){
      row[prop+'_name']=this.options_Insure.filter(item=>{return item.id==row[prop]}).length>0?this.options_Insure.filter(item=>{return item.id==row[prop]})[0].name:''
    },
    //下拉框选择初始化
    inputType(type) {
      if(!type){
        this.tabClickIndex = null
        this.tabClickLabel = null    
      }
    },
    //取消修改
    cancel() {
      this.tabClickIndex = null
      this.tabClickLabel = null   
      this.Visible = false;
    },
  },
};
</script>

<style scoped lang="less" >
  .midContant {
    border: 0;
    width: 100%;
  }
  .dialogBox .dialogBoxItem {
    flex-wrap: wrap;
    gap: 1%;
    justify-content: flex-start;
    .dialogBoxItemRow {
      width: 24%;
    }
  }
</style>